<template>
  <div class="dialog">
    <el-dialog
      :title="titleText"
      :visible.sync="showDialog"
      width="70%"
      top="0"
      :close-on-click-modal="false"
      @close="cancel"
    >
      <el-form
        ref="ruleForm"
        label-position="left"
        :model="formData"
        :rules="rules"
        class="el-form"
      >
        <el-row>
          <!-- <el-form-item prop class="w100p" label="供应原料:" /> -->
          <el-table
            ref="rightTableData"
            :data="rightTableData"
            border
            stripe
            style="position: relative"
          >
            <el-table-column label="原料编码">
              <template slot-scope="scope">
                <el-input v-model="scope.row.materialNo" disabled placeholder />
              </template>
            </el-table-column>
            <el-table-column label="原料名称" prop="materialNo">
              <template slot-scope="scope">
                <el-select
                  v-model="scope.row.materialNo"
                  placeholder="请选选择原料"
                  disabled
                  @change="getMnews($event,scope.$index)"
                >
                  <el-option
                    v-for="item in materialList"
                    :key="item.materialNo"
                    :label="item.material.materialName"
                    :value="item.materialNo"
                  />
                </el-select>
              </template>
            </el-table-column>
            <el-table-column label="原料规格" prop="materialspec">
              <template slot-scope="scope">
                <el-input
                  v-model="scope.row.materialspec"
                  disabled
                  placeholder
                />
              </template>
            </el-table-column>
            <el-table-column label="型号" prop="model">
              <template slot-scope="scope">
                <el-input v-model="scope.row.model" disabled placeholder />
              </template>
            </el-table-column>
            <!-- <el-table-column label="操作" width="80">
              <template slot-scope="scope">
                <el-button
                  type="text"
                  style="color: red; text-decoration: underline"
                  size="small"
                  @click.native.prevent="deleteRow(scope.$index, rightTableData)"
                >删除</el-button>
              </template>
            </el-table-column>-->
          </el-table>
          <!-- <el-form-item class="w100p">
            <el-button
              type="info"
              plain
              icon="el-icon-circle-plus-outline"
              class="addInfo"
              @click="addRow"
            >添加</el-button>
          </el-form-item>-->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button class="cancelbtn" @click="cancel()">取 消</el-button>
        <!-- <el-button type="primary" class="savebtn" @click="save('ruleForm')">保 存</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  components: {},
  props: {
    // 弹框名称
    titleText: {
      type: String,
      default: ""
    },
    show: {
      type: Boolean,
      default: false
    },
    formDataCopy: {
      type: Object,
      default: () => {}
    },
    materialList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      showDialog: this.show,
      // 展示
      formData: {},
      pictureList: [],
      rules: {
        supplierName: [
          {
            required: true,
            message: "请填写供应商名称",
            trigger: ["change", "blur"]
          }
        ],
        legalBody: [
          {
            required: true,
            message: "请填写供应商负责人",
            trigger: ["change", "input", "blur"]
          }
        ],
        tel: [
          {
            required: true,
            message: "请填写供应商联系电话",
            trigger: ["change", "blur"]
          }
        ],
        address: [
          {
            required: true,
            message: "请填写供应商地址",
            trigger: ["change", "blur"]
          }
        ]
      },
      rightTableData: []
    };
  },

  watch: {
    show(v) {
      this.showDialog = v;
    },
    formDataCopy(v) {
      this.formData = v;
      this.rightTableData = this.formData.materialList || [];
    }
  },
  created() {},
  mounted() {},
  methods: {
    getMnews(e, index) {
      console.log(e, index);
      this.materialList.forEach(item => {
        if (item.materialNo === e) {
          this.$set(this.rightTableData[index], "materialNo", item.materialNo);
          this.$set(
            this.rightTableData[index],
            "materialName",
            item.material.materialName
          );
          this.$set(
            this.rightTableData[index],
            "materialspec",
            item.material.materialspec
          );
          this.$set(this.rightTableData[index], "model", item.material.model);
        }
      });
    },
    addRow() {
      var list = {
        paramName: "",
        paramValue: ""
      };
      this.rightTableData.unshift(list);
    },
    // 删除改行
    deleteRow(index, rows) {
      if (rows[index].templateCode) {
        this.del(rows, index);
      } else {
        rows.splice(index, 1);
      }
    },
    // 删除列表图片
    removePicture(file) {
      const index = this.pictureList.findIndex(item => {
        return item.uid === file.uid;
      });
      this.pictureList.splice(index, 1);
      console.log(this.pictureList, "删除");
    },
    addPicture(file) {
      this.pictureList.push(file.file);
      console.log(this.pictureList, "添加");
    },
    save(formData) {
      this.$refs[formData].validate(valid => {
        if (valid) {
          let materialNoList = [];
          this.rightTableData.forEach(item => {
            if (item.materialNo) {
              materialNoList.push(item.materialNo);
            }
          });
          this.formData.materialNoList = materialNoList;
          console.log(this.formData);
          this.$emit("addSupplier", this.formData);
          this.pictureList = [];
          this.close();
        }
      });
    },
    close() {
      this.$emit("closeDialog");
      this.$refs.ruleForm.clearValidate();
      this.formData = {};
    },
    cancel() {
      this.$emit("closeDialog");
      this.$refs.ruleForm.clearValidate();
      this.formData = {};
    }
  }
};
</script>

  <style lang="scss" scoped>
::v-deep
  .el-dialog__wrapper
  .el-dialog
  .el-dialog__body
  .el-form
  .el-form-item
  .el-form-item__label {
  min-width: 160px !important;
}
.el-table {
  max-height: 50vh;
  overflow-y: auto;
  overflow-x: hidden;
}
::v-deep .el-table th {
  color: #000;
  background-color: rgba(120, 182, 193, 0.4) !important;
}
::v-deep .el-table .el-table__row--striped {
  color: #000;
  background-color: rgba(186, 186, 186, 0.4) !important;
}
::v-deep.el-table td,
.el-table th.is-leaf,
.el-table--border,
.el-table--group,
.el-table th.is-leaf {
  border-color: #d3d3d3 !important;
}
::v-deep .el-table th.is-leaf {
  border-color: #d3d3d3 !important;
}
::v-deep .el-table__empty-text {
  color: #000;
}

.addInfo {
  width: 100%;
  margin: 10px;
  background-color: #006e91;
  color: #fff;
  font-size: 18px;
}
</style>
